<template>
    <div class="home">
        <main class="p20">
            <section class="bcf7 mb20 f20 cfff">
                <ul class="section mb20" v-for="el in arr">
                    <li class="flex jcsb mb30">
                        <div >
                            <p class="mb15">{{el.discountsName}}</p>
                            <h2 >满{{el.amountCondition}}元可用</h2>
                        </div>
                        <div >
                            ￥<span class="fb" style="font-size: 70rem;">{{el.discountsNumber}}</span>
                        </div>
                    </li>
                    <li class="line-dash cfff mb20"></li>
                    <li class="flex jcsb">
                        <p>有效期至:{{onFormat(el.startTime)}} —— {{onFormat(el.endTime)}}</p>
                        <div>
                            <a href="#" class="cfff" @click="onBack(el)">去使用
                                <i class="el-icon-arrow-right  f20 "></i>
                            </a>
                        </div>
                    </li>
                </ul>
            </section>
        </main>
    </div>
</template>
<script>
import { businessDiscounts } from '../../../api/wash';
export default {
    mounted(){
        this.init();
    },
    methods:{
        init(){
            businessDiscounts({
            userId:1,
            newDate:'2023-03-11',
            state:'0'
            }).then(r=>{
                this.arr = r.data;
            })
        },
        onFormat(time){//修改时间格式
            let t= time.substr(0,10).split('-').join('.');
        return t;
        },
    },
  data(){
    return{
        arr:[]  
    }
  }
}
</script>
<style scoped>
.mb35{margin-bottom: 35rem;}
.asc{align-self:center;}
.bcf7{background-color: #fff;}
.line{height: 1rem;background-color: #f7f7f7;}
.line-dash{border: dashed 2rem;}
/* .home{background-color: #f7f7f7;} */
/* 头部样式  ---需要可剪切 */
header .title{height: 145rem;line-height: 145rem;}
header{height:435rem;background-color: #3385fd;}
header  .img{width: auto;left: 20rem;top: 0;}

/* main {margin-top: -310rem;} */

body{background-color: red !important;}
/* 手机端必须加上这一句--体验感 */
main{margin-bottom: 120rem;}
main section{padding: 40rem 30rem;border-radius: 20rem;box-sizing: border-box;} 
main ul {height: 225rem;background: url(../../../assets/img/wash-car-img/ellipse-orange.png) no-repeat;padding: 30rem 40rem;box-sizing: border-box; background-size: 100% 225rem;}
</style>